<template>
  <div>
    <el-card class="box-card" style="margin: -55px auto;background: #f6f6f7;">
      <el-container>
        <app-header></app-header>
        <el-main style="width: 1200px;margin: 16px auto;">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>您所在的位置：</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>特色资源</el-breadcrumb-item>
            <el-breadcrumb-item>上传资料</el-breadcrumb-item>
          </el-breadcrumb>
          <el-col>
            <el-row style="float: left;">
              <el-button type="text" @click="open()">上传文件</el-button>
            </el-row>
          </el-col>
          <!--修改密码模态框-->
          <el-dialog
            title="文件上传"
            :visible.sync="dialogVisible"
            width="30%"
          >
            <el-form :model="fileUpload" ref="fileUpload" :rules="fileUploadRules">
              <el-form-item label="选择文件：">
              <el-upload
                style="margin: 0 auto"
                class="upload-demo"
                accept=".zip,.rar,.7z"
                action=""
                ref="upload"
                :file-list="fileList"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                multiple
                :on-exceed="handleExceed"
                :auto-upload="false"
                :http-request="httpRequest">
                <el-button slot="trigger" size="medium" type="primary" style="float: left">点击上传</el-button>
              </el-upload>
              </el-form-item>
              <el-form-item label="填写信息：" prop="radio">
                <el-radio v-model="radio" label="0">填写</el-radio>
                <el-radio v-model="radio" label="1">不填写</el-radio>
              </el-form-item>
              <el-form-item v-if="radio=='0'" label="文件名称：" prop="name">
                <el-input
                  v-model="fileUpload.name"
                  type="text"
                  auto-complete="off"
                  :clearable="true"
                  style="width: 55%"
                  show-word-limit
                  maxlength="20"
                />
              </el-form-item>
                <el-form-item label="文件类型：" v-if="radio=='0'" prop="columnType">
              <el-select v-model="fileUpload.columnType" placeholder="请选择栏目类型">
                <el-option
                  v-for="item in ColumnType"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
              </el-form-item>
              <el-form-item label="文件描述：" prop="depiction" v-if="radio=='0'">
                <el-input
                  v-model="fileUpload.depiction"
                  type="textarea"
                  auto-complete="off"
                  :clearable="true"
                  style="width: 55%"
                  autosize
                  show-word-limit
                  maxlength="100"
                />
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogSubmit('fileUpload')">确 定</el-button>
            </span>
          </el-dialog>

          <!--<el-upload
            style="margin: 0 auto"
            class="upload-demo"
            :action="upload"
            ref="upload"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
            :auto-upload="false"
            :file-list="fileList">
            <el-button slot="trigger" size="medium" type="primary">点击上传</el-button>
            <span slot="tip" class="el-upload__tip" style="height: 20px;">请选择上传的文件，单个文件不超过50M</span>
          </el-upload>
            <el-button size="medium" type="success" @click="submitUpload">上传</el-button>-->
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-card>
  </div>
</template>

<script>
import myHeader from '../../components/myHeader'
import {selectAllType, upload} from '@/api/news'
export default {
  data () {
    return {
      activeIndex1: '1',
      newList: {},
      fileList: [],
      // upload: '/api/upload',
      dialogVisible: false,
      radio: '0',
      fileUpload: {name: '', columnType: '', depiction: ''},
      ColumnType: {},
      // form 验证规则
      fileUploadRules: {
        name: [{ required: true,
          trigger: 'change',
          message: '请填写上传文件的名称',
          pattern: /([\u4e00-\u9fa5]{1,20})|([A-Za-z0-9 ]{1,40})$/ }],
        columnType: [{ required: true, message: '请选择上传栏目', trigger: 'change' }],
        depiction: [{ required: true,
          trigger: 'change',
          message: '请填写上传文件的描述',
          pattern: /([\u4e00-\u9fa5]{1,100})|([A-Za-z0-9 ]{1,500})$/ }]
      }

    }
  },
  components: {
    'app-header': myHeader
  },
  methods: {
    handleRemove (file, fileList) {
      console.log(file, fileList)
      console.log('handleRemove')
    },
    handlePreview (file) {
      console.log(file)
      console.log('handlePreview')
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    /* 打开上传文件模态框 */
    open () {
      this.dialogVisible = true
    },
    dialogSubmit (fileUpload) {
      this.$refs[fileUpload].validate((valid) => {
        if (valid) {
          this.$refs.upload.submit()// 这里是执行文件上传的函数，其实也就是获取我们要上传的文件
          // 验证文件的长度
          if (this.fileList.length > 0) {
            console.log(2222)
            let upData = new FormData()
            // this.$refs.upload.submit()// 这里是执行文件上传的函数，其实也就是获取我们要上传的文件
            this.fileList.forEach(function (file) { // 因为要上传多个文件，所以需要遍历
              upData.append('file', file, file.name)
            // upData.append('file', this.file); //不要直接使用我们的文件数组进行上传，你会发现传给后台的是两个Object
            })
            upData.append('info', JSON.stringify(this.fileUpload))
            upload(upData).then(res => {
              if (res.data.status === 1005) {
                this.$message.success('文件上传成功！')
                // 清空文件
                this.$refs.upload.clearFiles()
                this.fileList = []
                // 清空input
                this.fileUpload = {}
                this.dialogVisible = false
              } else {
                this.$message.error('文件上传失败！')
                // 清空文件
                this.$refs.upload.clearFiles()
                this.fileList = []
                // 清空input
                this.fileUpload = {}
                this.dialogVisible = false
              }
            })
          } else {
            this.$message.warning('请选择上传的文件')
          }
        } else {
          console.log('正则验证不通过')
          return false
        }
      })
    },
    httpRequest (param) {
      this.fileList.push(param.file)// 一般情况下是在这里创建FormData对象，但我们需要上传多个文件，为避免发送多次请求，因此在这里只进行文件的获取，param可以拿到文件上传的所有信息
    }
  },
  created () {
    selectAllType().then(res => {
      if (res.data.status === 1005) {
        // this.$message.success('查询成功')
        // console.log(res.data.data)
        this.ColumnType = res.data.data
      } else {
        this.$message.error('查询失败')
      }
    })
  }
}
</script>

<style scoped>
.el-header, .el-footer {
  background-color: #1a75ce;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  line-height: 200px;
}

.el-main {
  //background-color: #E9EEF3;
  background: rgb(246, 246, 247);
  color: #333;
}

body > .el-container {
  margin-bottom: 40px;
}
/deep/ .el-form-item__error{
  margin-left: 140px;
}

</style>
